 /*
 * Override Bootstrap's default container.
 */

 body {
     font-family: "Helvetica Neue", "Helvetica", "Lucida Grande", "Arial", "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif";
     font-weight: normal;
     padding-top: 50px;
 }

 a {
     color: #cf4646;
 }

 a:hover,
 a:focus {
     color: #A62C2C;
 }

 pre {
     border: none;
     background-color: transparent;
 }









 .jumbotron {
     text-align: center;
     background-color: #fff;
     color: #fff;
 }

 .jumbotron .lead em {
     display: none;
 }

 .jumbotron .logo {
     width: 100%;
     max-width: 200px;
 }

 .jumbotron .btn-getting-started {
     color: #efbfbf;
     border: none;
     box-shadow: inset 0 0 0 2px #efbfbf;
     border-radius: 2px;
     background-color: transparent;
     margin-top: 26px;
 }

 .jumbotron .btn-getting-started:hover,
 .jumbotron .btn-getting-started:active {
     color: #fff;
     box-shadow: inset 0 0 0 2px #fff;
     background-color: transparent;
 }


 .navbar-inverse .navbar-nav>li.register>a {
     margin: 0;
     padding: 0 15px;
     border: 0;
 }

 .navbar-inverse .navbar-toggle .icon-bar {
     background: #1cb0a8;
 }

 .jumbotron {
     padding: 0;
 }



 .navbar-inverse {
     background-color: #fff;
     border-color: transparent;
 }

 .navbar-inverse .navbar-brand {
     color: #efefef;
 }

 .navbar-inverse .navbar-nav>li>a {
     color: #0b2433;
 }

 .navbar-inverse .navbar-nav>li>a:hover {
     color: #1cb0a8;
 }

 .navbar-inverse .navbar-nav>.active>a,
 .navbar-inverse .navbar-nav>.active>a:focus,
 .navbar-inverse .navbar-nav>.active>a:hover {
     color: #fff;
     background-color: transparent;
 }

 .navbar-inverse .navbar-collapse,
 .navbar-inverse .navbar-form {
     border-color: #1cb0a8;
 }

 .navbar-inverse .navbar-toggle {
     border-color: #1cb0a8;
 }

 .navbar-inverse .navbar-toggle:hover,
 .navbar-inverse .navbar-toggle:focus {
     background-color: transparent;
 }

 .footer {
     padding: 60px 0;
     background: #3a70f3;
     font-size: 14px;
     line-height: 34px;
     color: #fff;
 }

 .footer a {
     color: inherit;
 }

 .footer a:hover {
     text-decoration: none;
     color: inherit;
 }

 .QR-code {
     display: inline-block;
     width: 134px;
     margin-top:10px;
 }

 .QR-code img {
     display: inline-block;
     width: 134px;
     height: 134px;
     background: #666;
     margin: 0 auto;
 }
 .QR-code p{
    padding-top:2px;
 }

 .docs-wrapper {
     margin-top: 30px;
 }

 .benefits h2 {
     /*margin-top: 40px;*/
     margin: 0;
 }

 .benefits p {
     font-size: 18px;
 }

 .markdown-body {
     font-size: 16px;
     line-height: 1.8;
 }

 .markdown-body h1,
 .markdown-body h2,
 .markdown-body h3,
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
     margin-top: 1.2em;
     margin-bottom: 0.6em;
     line-height: 1.35;
 }

 .markdown-body h6,
 .markdown-body h5 {
     font-size: 18px;
 }

 .markdown-body p,
 .markdown-body pre,
 .markdown-body ul,
 .markdown-body ol,
 .markdown-body dl,
 .markdown-body form,
 .markdown-body hr,
 .markdown-body table,
 .markdown-body blockquote {
     margin-bottom: 1.2em;
 }

 .markdown-body img {
     display: block;
     max-width: 100%;
     height: auto;
 }

 .markdown-body a {
     text-decoration: underline;
 }

 .markdown-body a:hover {
     text-decoration: underline;
 }

 .markdown-body blockquote {
     margin: 1em 0 1em 0;
     padding: 0 0 0 1.6em;
 }

 .markdown-body blockquote small {
     display: inline-block;
     margin: 0.8em 0 0.8em 1.5em;
     font-size: 0.9em;
 }

 .markdown-body pre {
     font-size: 14px;
     border: none;
     border-radius: 0;
 }

 .markdown-body hr {
     border-top: 1px solid #e5e5e5;
 }

 .markdown-body li ul,
 .markdown-body li ol {
     margin-bottom: 0.8em;
 }


 .banner-wrap img {
     width: 100%;
     position: relative;
     vertical-align: middle;
 }





 @media (min-width: 768px) {
     .site-navbar .navbar-nav {
         float: right!important;
         width: 85%;
     }
     .navbar-nav>li.register,
     .navbar-nav>li.login {
         float: right;
     }
     .navbar-inverse .navbar-nav>li.register>a {
         margin-top: 10px;
         margin-left: 10px;
         padding: 5px 8px;
         background: #1cb0a8;
         border-radius: 3px;
         color: #fff;
     }
     .xcx-product-box {
         width: 100%;
         padding: 80px 100px;
         background: #f5f7f7;
     }

     .xcx-product-title {
         padding-bottom: 60px;
     }
     .step-number {
         width: 62px;
         height: 62px;
         margin: 0 auto;
         border-radius: 50%;
         font-size: 24px;
         line-height: 60px;
         text-align: center;
         border: 2px solid #3a70f3;
         color: #3a70f3;
     }
     .step-img {
         width: 100px;
         height: 90px;
         margin: 0 auto;
         background: gray;
         margin-top: 70px;
         margin-bottom: 40px;
     }
     .step-title {
         margin-bottom: 18px;
     }
     .xcx-marketing {
         width: 100%;
         padding: 80px 100px;
         background: #fff;
     }
     .xcx-marketing-title {
         padding-bottom: 60px;
     }
     .xcx-marketing-img {
         width: 90px;
         height: 90px;
         background: gray;
         border-radius: 50%;
         margin: 40px auto;
     }
     p.xcx-marketing-text {
         font-size: 18px;
     }
     .xcx-plan {
         width: 100%;
         padding: 80px 100px;
         background: #f5f7f7;
     }
 }

 @media (min-width:1200px) {
     .xcx-marketing-wrap {
         width: 1200px;
         margin: 0 auto;
     }
     .xcx-product-step {
         width: 1200px;
         margin: 0 auto;
     }
 }

 @media (min-width:992px) and (max-width:1200px) {
     .xcx-marketing-wrap {
         width: 992px;
         margin: 0 auto;
     }
     .xcx-product-step {
         width: 992px;
         margin: 0 auto;
     }
 }



 @media (min-width:768px) and (max-width:992px) {
     .xcx-product-step {
         padding: 0 50px;
     }
 }

 @media (max-width:768px) {
     .xcx-product-box {
         width: 100%;
         padding: 30px 50px;
         background: #f5f7f7;
     }

     .xcx-product-title {
         padding-bottom: 10px;
     }

     .xcx-product-title h2 {
         font-size: 18px;
     }

     .xcx-product-step {
         padding: 0;
     }
     .step-number {
         display: none;
         width: 62px;
         height: 62px;
         margin: 0 auto;
         border-radius: 50%;
         font-size: 24px;
         line-height: 60px;
         text-align: center;
         border: 2px solid #3a70f3;
         color: #3a70f3;
     }
     .step-img {
         width: 100px;
         height: 90px;
         margin: 20px auto;
         background: gray;
     }
     .step-title {
         margin-bottom: 10px;
         font-size: 16px;
     }
     .step-descript {
         font-size: 14px;
     }
     .xcx-marketing {
         width: 100%;
         padding: 30px 50px;
         background: #fff;
     }
     .xcx-marketing-title {
         padding-bottom: 10px;
     }
     .xcx-marketing-title h2 {
         font-size: 18px;
     }
     .xcx-marketing-img {
         width: 60px;
         height: 60px;
         background: gray;
         border-radius: 50%;
         margin: 20px auto;
     }
     p.xcx-marketing-text {
         font-size: 14px;
     }
     .xcx-plan h2 {
         font-size: 18px;
     }
     .footer {
         text-align: center;
         padding: 30px 0;
         line-height: 24px;
     }
     .QR-code {
         display:block;
         margin:0 auto;
     }
 }